/*
 * @Author: FengKongLi 
 * @Date: 2021-08-25 11:23:01 
 * @Last Modified by: FengKongLi
 * @Last Modified time: 2021-08-26 01:00:01
 */
// 审核大厅--资讯评论页面
<template>
  <div>
    <!-- 查询 -->
    <div>
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item>
          <el-input
            clearable
            v-model="searchForm.comment"
            placeholder="请输入关键字"
          ></el-input>
        </el-form-item>
        
        
        <el-form-item>
          <el-button type="primary" @click="toSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格数据展示 -->
    <div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="序号" width="80px">
        </el-table-column>
        <el-table-column prop="comment" label="评论内容"> </el-table-column>
        <el-table-column prop="userId" label="评论人编号"> </el-table-column>
        <el-table-column prop="articleId" label="资讯编号"> </el-table-column>
        <el-table-column
          prop="commentTime"
          label="评论时间"
          :formatter="fmtTableDateDay"
        >
        </el-table-column>
        <el-table-column label="状态" prop="status" align="center" width="80px">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === '通过'" type="success">
              {{ scope.row.status }}
            </el-tag>
            <el-tag v-else-if="scope.row.status === '不通过'" type="danger">
              {{ scope.row.status }}
            </el-tag>
            <el-tag v-else type="info">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button @click="toDelete(scope.row.id)" type="text"
              >删除</el-button
            >
            <span v-show="scope.row.status === '未审核'">
              <el-button @click="toPass(scope.row.id)" type="text"
                >通过</el-button
              >
              <el-button @click="toNoPass(scope.row.id)" type="text"
                >不通过</el-button
              >
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="page-div">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  pageQuery, 
  deleteById,
  batchDelete,
  check
} from "@/api/infoComment";
import { fmtTableDateDay } from "@/filters/index";
export default {
  data() {
    return {
      // 时间格式
      fmtTableDateDay,
      tableData: {},
      //分页参数
      params: {
        page: 1,
        pageSize: 10,
      },
      // 总条数
      total: 0,
      searchForm: {},
    };
  },
  watch: {
    // 深度监听分页参数,当多少条/页发生变化时重新请求数据
    params: {
      handler() {
        this.getInfoCommentData();
      },
      deep: true,
    },
  },
  created() {
    this.getInfoCommentData();
  },
  methods: {
    async getInfoCommentData() {
      let res = await pageQuery(this.params);
      this.tableData = res.data.list;
      this.total = res.data.total;
    },
    //每页显示的条数发生变化时的事件处理程序
    handleSizeChange(val) {
      this.params = {
        page: 1,
        pageSize: val,
      };
    },
    // 当前页码发生变化时的事件处理程序
    handleCurrentChange(val) {
      this.params.page = val;
    },
    // 点击 通过按钮
    async toPass(id){
       let res = await checkPass({id});      
       if(res.status==200){
           this.status="通过";
           this.$notify({
               title: "审核通过",
                message: res.message,
                type: "success",
           });
       }
       this.getAccountApplyData();
    },
     // 点击 不通过按钮
    async toNoPass(id){
       let res = await checkNoPass({id});
       if(res.status==200){
           this.status="不通过";
           this.$notify({
               title: "审核不通过",
                message: res.message,
                type: "success",
           });
       }
       this.getAccountApplyData();
    },
    
    // 点击查询按钮
    async toSearch() {
      let temp = {
        ...this.params,
        ...this.searchForm,
      };
      for (let key in temp) {
        if (!temp[key]) {
          delete temp[key];
        }
      }
      let res = await pageQuery(temp);
      this.tableData = res.data.list;
      this.total = res.data.total;
    },
    // 删除按钮
    async toDelete(id) {
      this.$confirm("此操作将永久删除这条数据,是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await deleteById({ id });
          if (res.status === 200) {
            this.$message({
              type: "success",
              message: "删除成功",
            });
          }
          this.getInfoCommentData();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style scoped>
</style>